<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  </head>
  <body>
    <!-- 计算器 -->
    <div id="app">
      <input v-model="firstNumber" type="number" />
      <select v-model="select">
        <option value="add">+</option>
        <option value="minus">-</option>
        <option value="ride">*</option>
        <option value="divide">/</option>
      </select>
      <input v-model="secondNumber" type="number" />
      <button @click="count">=</button>
      <div v-if="result !== null">结果: {{ result }}</div><br>
      <!-- 新闻列表 -->
      <input type="text" v-model="newLink.id" placeholder="ID" />
      <input type="text" v-model="newLink.name" placeholder="名称" />
      <button @click="addLink">添加</button>
      <table id="tables">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>链接</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(link, index) in links":key="index" @mouseover="changindex(index)">
            <div :class="index==a?'active':''">
            <td>{{ link.id }}</td>
            <td>{{ link.name }}</td>
            <td>{{ link.url }}</td>
            <td>{{ link.describe }}</td>
            <td><button @click="deleteLink(index)">删除</button></td>
          </div>
          </tr>
        </tbody>
      </table>
    </div>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      #tables thead tr:first-child {
        background-color: rgb(218, 159, 214);
        color: white;
      }
      #tables tbody tr:nth-child(odd) {
        background-color: aliceblue;
      }
      #tables tbody tr:nth-child(even) {
        background-color:rgb(237, 163, 200);
      }
      #tables tbody tr:hover {
        background-color: rgb(240, 208, 174);
      }
      .active{
        background-color: chartreuse;
      }
      button {
        margin: 5px;
      }
    </style>
    <script>
      new Vue({
        el: "#app",
        data: {
          firstNumber: "",
          secondNumber: "",
          result: null,
          select: "",
          newLink: "",
          name: "",
          url: "",
          index:"",
          a:0,
          links: [
            { id: 1, name: "哔哩哔哩", url: "https://www.bilibili.com/", describe:"bilibili" },
            { id: 2, name: "今日头条", url: "https://www.toutiao.com/", describe:"bytedance" },
            { id: 3, name: "百度", url: "www.baidu.com", describe:"baidu" },
            { id: 4, name: "新浪微博", url: "https://www.weibo.com/", describe:"weibo" },
            { id: 5, name: "腾讯网", url: "www.qq.com", describe:"tencent" },
          ],
        },
        methods: {
          count() {
            if (!this.firstNumber || !this.secondNumber || !this.select) {
              alert("请输入完整的数据！");
              return;
            }

            const num1 = parseFloat(this.firstNumber);
            const num2 = parseFloat(this.secondNumber);

            switch (this.select) {
              case "add":
                this.result = num1 + num2;
                console.log(this.result);

                break;
              case "minus":
                this.result = num1 - num2;
                break;
              case "ride":
                this.result = num1 * num2;
                break;
              case "divide":
                if (num2 === 0) {
                  alert("除数不能为0!");
                  this.result = null;
                } else {
                  this.result = num1 / num2;
                }
                break;
              default:
                this.result = null;
            }
          },
          addLink() {
            if (this.newLink.name && this.newLink.url) {
              this.links.push({ ...this.newLink });
              this.newLink.id = "";
              this.newLink.name = "";
              this.newLink.url = "";
            }
          },
          deleteLink(index) {
            this.links.splice(index, 1);
          },
          changindex(index){
            // alert(index)
            this.a = index

          }
        },
      });
    </script>
  </body>
</html>
